import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { RoleApi } from '#/api/system/role';
import { formatDateTime } from '@vben/utils';


import { $t } from '#/locales';

export function useFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      fieldName: 'name',
      label: $t('system.role.roleName'),
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'description',
      label: $t('system.role.description'),
      componentProps: {
        type: 'textarea',
        rows: 4,
        autosize: { minRows: 4, maxRows: 6 }
      }
    },
    {
      component: 'Input',
      fieldName: 'permissions',
      formItemClass: 'items-start',
      label: $t('system.role.setPermissions'),
      modelPropName: 'modelValue',
    },
  ];
}

export function useGridFormSchema(): VbenFormSchema[] {
  const commonStyle = {
    width: '100%'  // 使用100%宽度，适应父容器
  };

  const commonProps = {
    labelWidth: '70px',  // 进一步减小标签宽度
    labelPosition: 'left' as const,
    style: {
      marginBottom: '0'  // 移除底部间距
    }
  };

  return [
    {
      component: 'Input',
      fieldName: 'name',
      label: $t('system.role.roleName'),
      componentProps: {
        ...commonProps,
        style: commonStyle,
        placeholder: $t('system.role.roleName')
      }
    },
    {
      component: 'Input',
      fieldName: 'id',
      label: $t('system.role.id'),
      componentProps: {
        ...commonProps,
        style: commonStyle,
        placeholder: $t('system.role.id')
      }
    },
    {
      component: 'Select',
      componentProps: {
        ...commonProps,
        allowClear: true,
        options: [
          { label: $t('common.yes'), value: true },
          { label: $t('common.no'), value: false },
        ],
        style: commonStyle,
        placeholder: $t('system.role.isSystem')
      },
      fieldName: 'isSystem',
      label: $t('system.role.isSystem'),
    },
    {
      component: 'Input',
      fieldName: 'description',
      label: $t('system.role.description'),
      componentProps: {
        ...commonProps,
        style: commonStyle,
        placeholder: $t('system.role.description')
      }
    },
    {
      component: 'DatePicker',
      fieldName: 'createdTime',
      label: $t('system.role.createdTime'),
      componentProps: {
        ...commonProps,
        style: commonStyle,
        type: 'daterange',
        startPlaceholder: $t('common.startTime'),
        endPlaceholder: $t('common.endTime'),
        valueFormat: 'YYYY-MM-DD',
        unlinkPanels: true,
        defaultTime: [
          new Date(2000, 1, 1, 0, 0, 0),
          new Date(2000, 2, 1, 23, 59, 59)
        ],
        shortcuts: [
          {
            text: '最近一周',
            value: () => {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: '最近一个月',
            value: () => {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          }
        ]
      }
    }
  ];
}

export function useColumns<T = RoleApi.RoleItem>(
  onActionClick: (params: { code: string; row: T }) => void,
): VxeTableGridOptions['columns'] {
  return [
    {
      type: 'checkbox',
      width: 60,
      align: 'center'
    },
    {
      type: 'seq',
      title: '序号',
      width: 60,
      align: 'center'
    },
    {
      field: 'name',
      title: $t('system.role.roleName'),
      width: 200,
    },
    {
      cellRender: {
        name: 'CellTag',
        options: [
          { value: true, label: $t('common.yes'), color: 'success' },
          { value: false, label: $t('common.no'), color: 'info' }
          ]
      },
      field: 'isSystem',
      title: $t('system.role.systemRole'),
      width: 100,
    },
    {
      field: 'description',
      minWidth: 100,
      title: $t('system.role.description'),
    },
    {
      field: 'createdTime',
      title: $t('system.role.createdTime'),
      width: 180,
      formatter: ({ cellValue }: { cellValue: string }) => {
        return formatDateTime(cellValue);
      }
    },
    {
      align: 'center',
      cellRender: {
        attrs: {
          nameField: 'name',
          nameTitle: $t('system.role.name'),
          onClick: onActionClick,
        },
        name: 'CellOperation',
      },
      field: 'operation',
      fixed: 'right',
      title: $t('system.role.operation'),
      width: 130,
    },
  ];
}
